import { useState, useEffect } from "react";
/**
 * useEffect 依赖项参数说明
 * 【说明】：useEffect根据传入的依赖项不同，会有不同的执行表现
 *          1、没有依赖项：组件初始化渲染执行 + 组件更新时执行渲染执行
 *          2、空数组依赖：只在初始化渲染时执行一次执行
 *          3、添加特定依赖项：组件初始化渲染 + 特定依赖项发生改变时执行
 */
function useEffectParam() {
  let [count, setCount] = useState(0);
  let [msg, setMsg] = useState(0);

  /**
   * 没有依赖项：
   * 【执行时机】：1、组件初始化渲染完毕会执行一次，
   *              2、当组件发生变化或更新时会执行
   */
  // useEffect(() => { console.log("没有依赖项", count); })

  /**
   * 空数组依赖：
   * 【执行时机】：只在组件初始化渲染时执行一次
   */
  // useEffect(() => { console.log("空数组依赖项", count); }, [])

  /**
   * 添加特定依赖项：
   * 【执行时机】：1、组件初始化渲染
   *              2、特定依赖项发生改变时执行、也就是说只有在数组中的数据发生变化事才会执行
   */
  useEffect(() => {
    console.log("空数组依赖项", count);
  }, [count, msg]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count</button>
      <button onClick={() => setMsg(msg + 1)}>msg</button>
    </div>
  );
}


export default  useEffectParam
